<!-- src/components/TeacherLayout.vue -->
<template>
  <div class="teacher-layout">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-left">
        <div class="logo">
          <i class="icon-logo"></i>
          <span class="logo-text">农民技能提升就业培训大数据平台</span>
        </div>
        <button class="menu-toggle" @click="toggleSidebar">
          <i class="icon-menu"></i>
        </button>
      </div>
      
      <div class="header-right">
        <div class="header-actions">
          <div class="search-box">
            <input type="text" placeholder="搜索课程、学员..." />
            <i class="icon-search"></i>
          </div>
          
          <div class="notification" @click="showNotifications">
            <i class="icon-bell"></i>
            <span class="badge" v-if="notificationCount > 0">{{ notificationCount }}</span>
          </div>
          
          <div class="user-menu" @click="toggleUserMenu">
            <img :src="userAvatar" alt="用户头像" class="avatar" />
            <span class="username">{{ userName || '教师' }}</span>
            <i class="icon-chevron-down"></i>
            
            <div class="dropdown-menu" v-show="showUserDropdown">
              <a href="#" class="dropdown-item" @click="goToProfile">
                <i class="icon-user"></i>个人资料
              </a>
              <a href="#" class="dropdown-item" @click="goToSettings">
                <i class="icon-settings"></i>设置
              </a>
              <hr class="dropdown-divider" />
              <a href="#" class="dropdown-item logout" @click="handleLogout">
                <i class="icon-logout"></i>退出登录
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 侧边导航栏 -->
      <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
        <nav class="sidebar-nav">
          <div class="nav-section">
            <div class="nav-title">教学管理</div>
            <ul class="nav-list">
              <li class="nav-item" :class="{ active: $route.name === 'TeacherDashboard' }">
                <router-link to="/teacher/dashboard" class="nav-link">
                  <i class="icon-dashboard"></i>
                  <span class="nav-text">仪表盘</span>
                </router-link>
              </li>
              <li class="nav-item" :class="{ active: $route.name === 'TeacherCourses' }">
                <router-link to="/teacher/courses" class="nav-link">
                  <i class="icon-book"></i>
                  <span class="nav-text">我的课程</span>
                </router-link>
              </li>
              <li class="nav-item" :class="{ active: $route.name === 'TeacherStudents' }">
                <router-link to="/teacher/students" class="nav-link">
                  <i class="icon-users"></i>
                  <span class="nav-text">我的学员</span>
                </router-link>
              </li>
              <li class="nav-item" :class="{ active: $route.name === 'TeacherSchedule' }">
                <router-link to="/teacher/schedule" class="nav-link">
                  <i class="icon-calendar"></i>
                  <span class="nav-text">课程安排</span>
                </router-link>
              </li>
              <li class="nav-item" :class="{ active: $route.name === 'TeacherResources' }">
                <router-link to="/teacher/resources" class="nav-link">
                  <i class="icon-folder"></i>
                  <span class="nav-text">教学资源</span>
                </router-link>
              </li>
            </ul>
          </div>

          <div class="nav-section">
            <div class="nav-title">个人中心</div>
            <ul class="nav-list">
              <li class="nav-item" :class="{ active: $route.name === 'TeacherProfile' }">
                <router-link to="/teacher/profile" class="nav-link">
                  <i class="icon-user"></i>
                  <span class="nav-text">个人信息</span>
                </router-link>
              </li>
              <li class="nav-item" :class="{ active: $route.name === 'TeacherAnalytics' }">
                <router-link to="/teacher/analytics" class="nav-link">
                  <i class="icon-bar-chart"></i>
                  <span class="nav-text">教学统计</span>
                </router-link>
              </li>
            </ul>
          </div>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="content">
        <div class="content-header">
          <h1 class="page-title">{{ pageTitle }}</h1>
          <div class="breadcrumb">
            <router-link to="/teacher/dashboard">首页</router-link>
            <i class="icon-chevron-right"></i>
            <span>{{ pageTitle }}</span>
          </div>
        </div>

        <div class="content-body">
          <router-view />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 响应式数据
const sidebarCollapsed = ref(false)
const showUserDropdown = ref(false)
const notificationCount = ref(2)

// 计算属性
const pageTitle = computed(() => {
  return route.meta?.title || '教师仪表盘'
})

const userName = computed(() => {
  return authStore.userInfo?.name || authStore.userInfo?.username || '教师'
})

const userAvatar = computed(() => {
  return authStore.userInfo?.avatar || '/default-teacher-avatar.png'
})

// 方法
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const toggleUserMenu = () => {
  showUserDropdown.value = !showUserDropdown.value
}

const showNotifications = () => {
  alert('通知功能待开发')
}

const goToProfile = () => {
  router.push('/teacher/profile')
  showUserDropdown.value = false
}

const goToSettings = () => {
  router.push('/teacher/profile')
  showUserDropdown.value = false
}

const handleLogout = async () => {
  if (confirm('确定要退出登录吗？')) {
    try {
      await authStore.logout()
      window.location.href = '/'
    } catch (error) {
      console.error('退出登录失败:', error)
      authStore.forceLogout()
      window.location.href = '/'
    }
  }
  showUserDropdown.value = false
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  if (!event.target.closest('.user-menu')) {
    showUserDropdown.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
/* 与管理员端相同的基础样式 */
.teacher-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  position: relative;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-logo {
  width: 32px;
  height: 32px;
  background: #10B981; /* 教师端使用绿色主题 */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.icon-logo::before {
  content: "👨‍🏫";
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 20px;
  color: #6B7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.menu-toggle:hover {
  background: #F3F4F6;
}

.icon-menu::before {
  content: "☰";
}

.header-right {
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  position: relative;
}

.search-box input {
  width: 250px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
}

.search-box .icon-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7280;
}

.icon-search::before {
  content: "🔍";
}

.notification {
  position: relative;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.notification:hover {
  background: #F3F4F6;
}

.icon-bell::before {
  content: "🔔";
  font-size: 18px;
}

.badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #EF4444;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s;
}

.user-menu:hover {
  background: #F3F4F6;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #10B981;
}

.username {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.icon-chevron-down::before {
  content: "▼";
  font-size: 10px;
  color: #6B7280;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 160px;
  z-index: 1000;
  margin-top: 4px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: #F3F4F6;
}

.dropdown-item.logout {
  color: #EF4444;
}

.dropdown-divider {
  margin: 4px 0;
  border: none;
  border-top: 1px solid #E5E7EB;
}

.icon-user::before {
  content: "👤";
}

.icon-settings::before {
  content: "⚙️";
}

.icon-logout::before {
  content: "🚪";
}

.main-container {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 250px;
  background: white;
  box-shadow: 2px 0 4px rgba(0,0,0,0.1);
  transition: width 0.3s;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-nav {
  padding: 20px 0;
}

.nav-section {
  margin-bottom: 24px;
}

.nav-title {
  padding: 0 20px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin: 2px 12px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #6B7280;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  gap: 12px;
}

.nav-link:hover {
  background: #F3F4F6;
  color: #374151;
}

.nav-item.active .nav-link {
  background: #10B981; /* 教师端主色调 */
  color: white;
}

.nav-link i {
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.icon-dashboard::before {
  content: "📊";
}

.icon-book::before {
  content: "📚";
}

.icon-users::before {
  content: "👥";
}

.icon-calendar::before {
  content: "📅";
}

.icon-folder::before {
  content: "📁";
}

.icon-bar-chart::before {
  content: "📈";
}

.nav-text {
  font-size: 14px;
  font-weight: 500;
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-title {
  display: none;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header {
  background: white;
  padding: 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  margin: 0;
  font-size: 24px;
  color: #1F2937;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.breadcrumb a {
  color: #6B7280;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #10B981;
}

.icon-chevron-right::before {
  content: ">";
  color: #9CA3AF;
}

.content-body {
  flex: 1;
  overflow-y: auto;
  background: #F9FAFB;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    padding: 0 16px;
  }
  
  .logo-text {
    display: none;
  }
  
  .search-box input {
    width: 200px;
  }
  
  .sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  
  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }
  
  .content {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .search-box {
    display: none;
  }
  
  .header-actions {
    gap: 8px;
  }
  
  .username {
    display: none;
  }
}
</style>